<template>
	<uw-dialog title="订单详情" width="80%" v-model="visible">
		<template #default>
			<div class="order-details">
				<!-- 基本信息 -->
				<el-card shadow="always" class="order-info-card uw-mb-20">
					<el-row>
						<el-col :span="8">
							<div><strong>订单号：</strong>{{ orderDetails.orderSn }}</div>
							<div><strong>订单状态：</strong><span class="status">{{ orderDetails.statusText }}</span></div>
							<div><strong>支付状态：</strong><span
									class="payment-status">{{ orderDetails.paymentStatusText }}</span></div>
						</el-col>
						<el-col :span="8">
							<div><strong>订单总金额：</strong><span class="price">￥{{ orderDetails.totalAmount }}</span></div>
							<div><strong>优惠金额：</strong>￥{{ orderDetails.discountAmount }}</div>
							<div><strong>实际支付金额：</strong><span class="price">￥{{ orderDetails.actualAmount }}</span>
							</div>
						</el-col>
						<el-col :span="8">
							<div><strong>创建时间：</strong>{{ orderDetails.createdAt }}</div>
							<div><strong>取消时间：</strong>{{ orderDetails.canceledAt || '未取消' }}</div>
							<div><strong>完成时间：</strong>{{ orderDetails.completedAt || '未完成' }}</div>
						</el-col>
					</el-row>
				</el-card>

				<!-- 发货信息 -->
				<el-card shadow="always" class="shipping-info-card uw-mb-20">
					<h3>发货信息</h3>
					<el-row>
						<el-col :span="8">
							<div><strong>收货人：</strong>{{ orderDetails.shippingAddress?.name }}</div>
							<div><strong>联系电话：</strong>{{ orderDetails.shippingAddress?.phone }}</div>
						</el-col>
						<el-col :span="8">
							<div><strong>收货地址：</strong>{{ orderDetails.shippingAddress?.address }}</div>
						</el-col>
						<el-col :span="8">
							<div><strong>物流公司：</strong>{{ orderDetails.shippingCompany || '未发货' }}</div>
							<div><strong>物流单号：</strong>{{ orderDetails.trackingNumber || '未发货' }}</div>
						</el-col>
					</el-row>
				</el-card>

				<!-- 商品信息 -->
				<el-card shadow="hover" class="order-items-card uw-mb-20">
					<h3>商品信息</h3>
					<el-table :data="orderDetails.items" border style="width: 100%">
						<el-table-column label="商品图片" width="100">
							<template #default="{ row }">
								<img :src="row.goodsImageUrl" alt="商品图片" class="goods-image" />
							</template>
						</el-table-column>
						<el-table-column label="商品名称" prop="goodsName"></el-table-column>
						<el-table-column label="规格" prop="specSummary">
							<template #default="{ row }">
								{{ row.specName }}: {{ row.specValue || '无' }}
							</template>
						</el-table-column>
						<el-table-column label="单价" prop="price"></el-table-column>
						<el-table-column label="数量" prop="quantity"></el-table-column>
						<el-table-column label="小计" prop="totalPrice"></el-table-column>
					</el-table>
				</el-card>

				<!-- 买家留言 -->
				<el-card shadow="never" class="remark-info-card uw-mb-20">
					<h3>买家留言</h3>
					<p>{{ orderDetails.message || '无' }}</p>
				</el-card>

				<!-- 操作按钮和关闭按钮 -->
				<div slot="footer" class="button-row">
					<el-space>
						<!-- 动态按钮根据订单状态显示 -->
						<el-button v-if="orderDetails.status === 1" type="primary"
							@click="handlePay(orderDetails.orderSn)">去支付</el-button>

						<el-button v-if="orderDetails.status === 2" type="warning"
							@click="handleShip(orderDetails.orderSn)">发货</el-button>

						<el-button v-if="orderDetails.status === 3" type="success"
							@click="handleComplete(orderDetails.orderSn)">确认收货</el-button>

						<el-button v-if="orderDetails.status === 4" type="info"
							@click="handleRefund(orderDetails.orderSn)"
							:disabled="!orderDetails.isRefund">申请退款</el-button>

						<el-button v-if="orderDetails.status === 1 || orderDetails.status === 2" type="danger"
							@click="handleCancel(orderDetails.orderSn)">取消订单</el-button>

						<!-- 关闭按钮 -->
						<el-button type="primary" @click="handleClose">关闭</el-button>
					</el-space>
				</div>
			</div>
		</template>
	</uw-dialog>
</template>


<script setup lang="ts">
	import { ref, watch } from 'vue';
	import { ElCard, ElRow, ElCol, ElTable, ElTableColumn, ElButton } from 'element-plus';
	import { getOrderDetailApi, } from '@/api/order';
	// payOrder, shipOrder, cancelOrder, completeOrder, requestRefund
	const visible = ref(false);

	// 保存订单详情数据
	const orderDetails = ref({
		orderSn: '',
		totalAmount: 0,
		discountAmount: 0,
		actualAmount: 0,
		totalQuantity: 0,
		status: 1,
		statusText: '',
		paymentStatusText: '',
		paymentMethod: '',
		message: '',
		createdAt: '',
		canceledAt: null,
		completedAt: null,
		isSales: true,
		isRefund: false,
		shippingAddress: null,
		shippingCompany: '',
		trackingNumber: '',
		items: [],
		shippedAt: null,
		deliveredAt: null
	});

	// 接收父组件传递的订单ID
	const props = defineProps({
		orderId: {
			type: String,
			required: true
		}
	});

	// 获取订单数据
	const fetchOrderDetails = async () => {
		const { data } = await getOrderDetailApi(props.orderId);
		if (data) {
			orderDetails.value = data;
		}
	};

	// 动态按钮操作
	const handlePay = async (orderSn) => {
		await payOrder(orderSn);
		fetchOrderDetails();
	};

	const handleShip = async (orderSn) => {
		await shipOrder(orderSn);
		fetchOrderDetails();
	};

	const handleComplete = async (orderSn) => {
		await completeOrder(orderSn);
		fetchOrderDetails();
	};

	const handleCancel = async (orderSn) => {
		await cancelOrder(orderSn);
		fetchOrderDetails();
	};

	const handleRefund = async (orderSn) => {
		await requestRefund(orderSn);
		fetchOrderDetails();
	};

	// 监听 orderId 变化，重新加载数据
	watch(() => props.orderId, (newOrderId) => {
		if (newOrderId) {
			fetchOrderDetails();
			visible.value = true;
		}
	});

	// 关闭弹窗
	const handleClose = () => {
		visible.value = false;
	};
</script>

<style scoped>
	.order-info-card,
	.shipping-info-card,
	.order-items-card,
	.remark-info-card,
	.action-buttons {
		border-radius: 10px;
		margin-bottom: 20px;
	}

	.goods-image {
		width: 70px;
		height: 70px;
		border-radius: 5px;
		object-fit: cover;
		cursor: pointer;
		transition: transform 0.2s;
	}

	.goods-image:hover {
		transform: scale(1.1);
	}

	.button-group {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
	}

	.price {
		color: #f56c6c;
		font-weight: bold;
	}

	.status {
		color: #67c23a;
		font-weight: bold;
	}

	.payment-status {
		color: #409eff;
		font-weight: bold;
	}

	.button-row {
		display: flex;
		justify-content: flex-end;
		gap: 10px;
	}
</style>